<template>
	<view class="base-page">
		<u-notify ref="uNotify"></u-notify> <!-- 通知横幅 -->
		<u-modal :show="showedit" title="是否确认修改信息" content="修改后需等待审核" :closeOnClickOverlay="true" showCancelButton
			@confirm="submitEdit()" @cancel="showedit = false" @close="showedit = false" :asyncClose="true"></u-modal> <!-- 修改确认模态框 -->
		<view class="info-list">
			<u-cell-group>
				<u-form :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item prop="id">
						<u-cell title="用户ID">
							<u-input slot="value" border="none" v-model="userInfo.id" type="text" readonly></u-input>
						</u-cell>
					</u-form-item>
					<u-form-item prop="name">
						<u-cell title="用户名">
							<u-input slot="value" placeholder=请输入用户名 border="bottom" v-model="userInfo.name"
								maxlength="10" type="text"></u-input>
						</u-cell>
					</u-form-item>
					<u-form-item prop="phone">
						<u-cell title="手机号码">
							<u-input slot="value" placeholder=请输入手机号码 border="bottom" v-model="userInfo.phone"
								maxlength="11" type="number">
								<u--text text="+86" slot="prefix" margin="0 3rpx 0 0" type="tips"></u--text>
							</u-input>
						</u-cell>
					</u-form-item>
					<u-form-item prop="idnumber">
						<u-cell title="身份证号">
							<u-input slot="value" placeholder=请输入身份证号 border="bottom" v-model="userInfo.idnumber"
								maxlength="18" type="idcard"></u-input>
						</u-cell>
					</u-form-item>
					<u-form-item prop="password">
						<u-cell value="修改密码" size="large" is-link @click="clickChangePwd()"></u-cell>
					</u-form-item>
				</u-form>
			</u-cell-group>
		</view>
		<u-gap height="100rpx" bgColor="#ffffff"></u-gap>
		<view class="submit-btn">
			<u-button text="完成" type="primary" plain size="normal" @click="clickEdit()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户信息
				userInfo: {
					id: "",
					phone: "",
					name: "",
					idnumber: "",
				},
				//提交信息
				submitInfo: {},
				//信息修改发生
				isedit: false,
				//模态框控制
				showedit: false,

				//token与登录态
				responseResult: [],
				islogin: false,
				mytoken: '', //token

				//表单验证规则
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '用户名不可为空',
						trigger: ['blur', 'change']
					},
					'phone': [{
						type: 'string',
						required: true,
						message: '手机号不可为空',
						trigger: ['blur', 'change'],
					}, {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return uni.$u.test.mobile(value);
						},
						message: '手机号码格式错误',
						trigger: ['blur'],
					}],
					'idnumber': [{
						type: 'string',
						required: true,
						message: '身份证号不可为空',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return uni.$u.test.idCard(value);
						},
						message: '身份证格式错误',
						trigger: ['blur'],
					}]
				},
			};
		},
		methods: {
			//从缓存获取用户信息
			setUser() {
				this.userInfo.id = uni.getStorageSync("Id")
				this.userInfo.name = uni.getStorageSync("Name")
				this.userInfo.phone = uni.getStorageSync("Phone")
				this.userInfo.idnumber = uni.getStorageSync("IdNumber")
			},
			//点击修改密码按钮
			clickChangePwd() {
				uni.navigateTo({
					url: "/pages/user/changePwd/changePwd" /* 跳转到修改密码页面 */
				})
			},
			//点击确认提交信息按钮
			clickEdit() {
				this.$refs.uForm.validate().then(res => {
					this.showedit = true
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			},
			//确认提交
			submitEdit() {
				this.submitInfo.id = this.userInfo.id
				//提交体生成开始
				//如果输入栏中的内容和缓存中的不同，就将这项内容加入提交体
				if (this.userInfo.name != uni.getStorageSync("Name")) {
					this.isedit = true /* 改变修改态 */
					this.submitInfo.name = this.userInfo.name
				} else { //相同则删除提交体
					delete this.submitInfo.name
				}
				//当输入栏中内容为""且缓存中的为null时，也删除提交体
				if (this.userInfo.name == "" && uni.getStorageSync("Name") == null) {
					delete this.submitInfo.name
				}

				//如果输入栏中的内容和缓存中的不同，就将这项内容加入提交体
				if (this.userInfo.phone != uni.getStorageSync("Phone")) {
					this.isedit = true /* 改变修改态 */
					this.submitInfo.phone = this.userInfo.phone
				} else { //相同则删除提交体
					delete this.submitInfo.phone
				}
				//当输入栏中内容为""且缓存中的为null时，也删除提交体
				if (this.userInfo.phone == "" && uni.getStorageSync("Phone") == null) {
					delete this.submitInfo.phone
				}

				//如果输入栏中的内容和缓存中的不同，就将这项内容加入提交体
				if (this.userInfo.idnumber != uni.getStorageSync("IdNumber")) {
					this.isedit = true /* 改变修改态 */
					this.submitInfo.idNumber = this.userInfo.idnumber
				} else { //相同则删除提交体
					delete this.submitInfo.idNumber
				}
				//当输入栏中内容为""且缓存中的为null时，也删除提交体
				if (this.userInfo.idnumber == "" && uni.getStorageSync("IdNumber") == null) {
					delete this.submitInfo.idNumber
				}
				//生成结束

				//如果发生信息修改
				if (this.isedit === true) {
					//发送修改信息请求
					uni.request({
						url: getApp().globalData.baseUrl+'/landlord/changeMe',
						method: 'POST',
						header: {
							'Authorization': 'Bearer ' + this.mytoken
						},
						data: this.submitInfo,
						success: (res) => {
							this.responseResult = res.data;
							if (this.responseResult.success == true) {
								//修改成功，则关闭确认框并跳转到user后，弹出成功提示
								this.showedit = false
								uni.reLaunch({
									url: "/pages/user/user?sign=1&msg=" + this
										.responseResult.data
								})
							} else {
								//修改不成功，则关闭确认框并弹出错误提示
								this.showedit = false
								this.$refs.uNotify.warning(this.responseResult.errorMsg)
							}
						},
						fail: (err) => {
							this.$refs.uNotify.error("请求错误: 修改用户信息失败")
						},
						complete: () => {
							this.isedit = false /* 还原修改态 */
						}
					});
				} else {
					/* 没有发生信息修改 */
					this.showedit = false
					this.$refs.uNotify.warning("请先修改信息")
				}
			}
		},
		onLoad() {
			let token = uni.getStorageSync("MyToken")
			if (token) {
				this.islogin = true
				this.mytoken = token
				this.setUser() //从缓存获取用户信息
			} else {
				this.islogin = false
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.base-page {
		background-color: #ffffff;
		height: 100%;
		box-sizing: border-box;
	}

	.info-list {}

	.submit-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}
</style>